<template>
    <div id='home'>
        <div class='d1'><Input v-model="value1" placeholder="Enter value1"></Input></div>
        <div class='d1'>
            <Input v-model="valuea" size="large" placeholder="large size"></Input>
            <Input v-model="valueb" placeholder="default size"></Input>
            <Input v-model="valuec" size="small" placeholder="small size"></Input>
        </div>
        <div class='d1'><Input v-model="value4" icon="ios-clock-outline" placeholder="Enter value4"></Input></div>
        <div class='d1'><Input v-model="value5" type="textarea" placeholder="Enter value5"></Input></div>
        <div class='d1'><Input v-model="value6" type="textarea" :rows="4" placeholder="Enter value6"></Input></div>   
        <div class='d1'><Input v-model="value7" type="textarea" :autosize="true" placeholder="Enter value7"></Input></div>
        <div class='d1'><Input v-model="value8" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="Enter value8"></Input></div>
        <div class='d1'><Input v-model="value9" disabled placeholder="Enter value9"></Input></div>
        <div class='d1'><Input v-model="value10" disabled type="textarea" placeholder="Enter value10"></Input></div>
        <div class='d2'>
            <Input v-model="value11">
                <span slot="prepend">http://</span>
                <span slot="append">.com</span>
            </Input>
        </div>
    
        <div class='d2'>
            <Input v-model="value12">
                <Select v-model="select1" slot="prepend">
                    <Option value="http">http://</Option>
                    <Option value="https">https://</Option>
                </Select>
                <Select v-model="select2" slot="append">
                    <Option value="com">.com</Option>
                    <Option value="org">.org</Option>
                    <Option value="io">.io</Option>
                </Select>
            </Input>
        </div>

        <div class='d2'>
            <Input v-model="value13">
                <Select v-model="select3" slot="prepend">
                    <Option value="day">Day</Option>
                    <Option value="month">Month</Option>
                </Select>
                <Button slot="append" icon="ios-search"></Button>
            </Input>
        </div>
    </div>
</template>
<script>
export default {
  data() {
    return {
      value1:"",
      valuea:"",
      valueb:"",
      valuec:"",
      value4: "",
      value5: "",
      value6: "",
      value7: "",
      value8: "",
      value9: "",
      value10: "",
      value11: "",
      value12: "",
      value13: "",
      select1: 'http',
      select2: 'com',
      select3: 'day'
    };
  }
};
</script>
<style lang='less' scoped>
#home {
  width: 400px;
  height: 500px;
  .d1 {
    width: 300px;
    margin: 10px 300px;
  }
  .d2 {
    width: 400px;
    margin: 20px 240px;
  }
}
</style>

